<template>
  <div class="app-container">
    <div class="title">服务人员详情页</div>
    <el-form ref="item" label-width="160px">
        <el-form-item label="服务人员账户名:">
          {{ form.service_personal_name }}
          <i v-if="form.service_personal_status == 1" class="el-icon-search">未审核</i>
          <i v-if="form.service_personal_status == 2" class="el-icon-success">已审核</i>
        </el-form-item>
    </el-form>
    <div class="title">服务人员基本信息</div>
    <el-form ref="item" label-width="160px">
      <el-row>
        <div class="top-box">
          <div class="box">
            <el-form-item label="姓 名:">
              {{ service.name }}
            </el-form-item>
            <el-form-item label="性 别:">
              {{ service.sex }}
            </el-form-item>
            <el-form-item label="年 龄:">
              {{ service.age }}
            </el-form-item>
            <el-form-item label="身份证号:">
              {{ service.cardNum }}
            </el-form-item>
            <el-form-item label="联系电话:">
              {{ service.tel }}
            </el-form-item>
            <el-form-item label="所属区域:">
              {{ service.area }}
            </el-form-item>
            <el-form-item label="家庭住址:">
              {{ service.address }}
            </el-form-item>
            <el-form-item label="企业识别号:">
              {{ service.comId }}
            </el-form-item>
            <el-form-item label="签约商家:">
              {{ service.com }}
            </el-form-item>
            <el-form-item label="服务技能:">
              {{ service.skill }}
            </el-form-item>
          </div>
          <div class="box">
            <el-form-item label="商家审核人账户:">
              {{ service.account }}
            </el-form-item>
            <el-form-item label="注册时间:">
              {{ service.rTime }}
            </el-form-item>
            <el-form-item label="审核时间:">
              {{ service.test }}
            </el-form-item>
          </div>
        </div>
      </el-row>
    </el-form>
    <div class="title">服务信息</div>
    <el-table :data="tableData" id="out-table" style="width: 100%" max-height="800">
      <el-table-column type="selection" width="55" align="center"></el-table-column>
      <el-table-column type="index" width="50" align="center"></el-table-column>
      <el-table-column
        v-for="item in tableList"
        :key="item._id"
        :prop="item.value"
        :label="item.name"
        align="center">
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 50]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totals">
      </el-pagination>
      <el-button class="upload" @click="exportExcel">导出excal
      </el-button>
    </div>
    <el-button type="danger" v-if="form.service_personal_status == 2">冻结
    </el-button>
    <el-button type="info" @click="back">返回
    </el-button>
  </div>
</template>

<script>
import { validateOrderStatus,busniessTestStatus,Excel } from '@/utils/validate'
import { formatDate } from '@/utils/index'
import request from '@/utils/request'
export function getList(mes) {
  return request({
    url: '/v1/admin/order',
    method: 'post',
    data: mes
  })
}
export default {
  data(){
    return{
      service: {},
      form: '',
      tableData: [],
      tableList: [
        { name: '订单编号', value: 'id' },
        { name: '服务标题', value: 'title' },
        { name: '服务时间', value: 'time' },
        { name: '服务地址', value: 'address' },
        { name: '订单状态', value: 'status' }
      ],
      currentPage: 1,
      totals: 0,
      size: 10
    }
  },
  created: function () {
    this.form = JSON.parse(localStorage.getItem('staffMes'))
    const i = this.form;
    // console.log(i);
    let item = {
      name: i.service_personal_name || '--',
      sex: i.service_personal_sex || '--',
      age: i.service_personal_age || '--',
      cardNum: i.service_personal_identity_card_Number || '--',
      tel: i.service_personal_phone || '--',
      area: i.service_personal_area || '--',
      address: i.service_personal_address || '--',
      comId: i.bussiness_id ? i.bussiness_id.business_mobile_phone : '--',
      com: i.bussiness_id ? i.bussiness_id.company_name : '--',
      skill: i.service_skill_array.join() || '--',
      account: i.bussiness_id ? i.bussiness_id.business_mobile_phone : '--',
      rTime: i.bussiness_id ? formatDate(new Date(i.bussiness_id.create_time*1000), 'yyyy-MM-dd hh:mm') : '--',
      test: i.check_time ? formatDate(new Date(i.check_time*1000), 'yyyy-MM-dd hh:mm') : '--',
    }
    this.service = item
    // console.log(this.service);
    let n = {
      page: 1,
      size: 10,
      service_personal_id: this.form._id
    }
    this.getMes(n)
  },
  methods: {
    getMes(item) {
      getList(item).then(res => {
        console.log(res);
        if (res.code === 200) {
          if (res.data.list.length) {
            this.setTableData = res.data.list
            this.totals = res.data.totalNumber
            res.data.list.map(item => {
              const val = {
                title: item.service_title,
                id: item._id,
                time: item.service_time ? formatDate(new Date(item.service_time*1000), 'yyyy-MM-dd hh:mm') : '无',
                address: item.user_address_id.address_info,
                status: validateOrderStatus(item.order_status),
              }
              this.tableData.push(val)
            })
          }
        } else {
          this.$message({
            message: res.msg,
            type: 'error'
          });
        }
      }).catch(error => {
        this.$message({
          message: error,
          type: 'error'
        });
      })
    },
    exportExcel() {
      Excel('#out-table')
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.tableData = []
      let obj = {
        size: val,
        page: 1
      }
      this.getMes(obj)
      this.size = val
    },
    handleCurrentChange(page) {
      console.log(`当前页: ${page}`);
      this.tableData = []
      let obj = {
        page: page,
        size: this.size
      }
      this.getMes(obj)
    },
    back() {
      this.$router.go(-1)
    },
    pay_type(type) {
      if (type === 1) {
        return '支付宝'
      } else if (type === 2) {
        return '微信'
      } else if (type === 0) {
        return '其他'
      }
    }
  },
  filters: {
    orderStatus(item) {
      return validateOrderStatus(item)
    },
    fomateTime(time) {
      return time ? formatDate(new Date(time*1000), 'yyyy-MM-dd  hh:mm') : '无'
    },
    pay_type(type) {
      if (type === 1) {
        return '支付宝'
      } else if (type === 2) {
        return '微信'
      } else if (type === 0) {
        return '其他'
      }
    }
  }
}
</script>

<style scoped>
  .el-steps{
    margin: 20px 0;
  }
  .title{
    height: 30px;
    line-height: 30px;
    font-weight: bold;
    border-top: 1px solid #d4d4d4;
  }
  .top-box{
    background: #eaf4fd;
    padding: 10px;
    border: 1px solid #d4e4f3;
    display: flex;
    flex-wrap: wrap;
  }
  .box{
    width: 45%;
  }
  .state{
    width: 10%;
    font-size: 12px;
    line-height: 30px;
    text-align: center;
    display: inline-block;
  }
  .footer{
    line-height: 30px;
    font-weight: 600;
    margin-top: 20px;
    border-bottom: 1px solid #d4d4d4;
  }
  .footer div{
    display: inline-block;
    width: 120px;
    text-align: center;
  }
  .footer div:hover{
    background: #d4e4f3;
  }
  .two{
    display: none;
  }
  .footer .active{
    background: #d4e4f3;
  }
  .block{
    display: flex;
    justify-content: space-between;
    padding: 10px;
  }
  .el-icon-success{
    color: green;
    margin-left: 20px;
  }
  .el-icon-search{
    color: #5a5a5a;
    margin-left: 20px;
  }
</style>
